<template>
  <div class="app-container">
    <div class="h-full date-line-page">
      <div class="chart-wrap h-full w-full" :class="`${chatClassName}`"></div>
    </div>
    <!-- <right-panel :button-top="560" class="app-cotainer__right-panel">
      <view-settings @change-barchart="" />
    </right-panel>
    <top-panel class="app-cotainer__top-panel">
      <div>123</div>
    </top-panel> -->

  </div>
</template>

<script>
import { handleLineFormatter } from '@/utils/study.js'
import ChartWatcherMixin from '@/mixins/ChartWatcherMixin.js'
// import ViewMixin from '@/mixins/ViewMixin.js'

// import RightPanel from '@/components/RightPanel/index.vue'
// import TopPanel from '@/components/TopPanel/index.vue'
// import ViewSettings from './components/settings.vue'

// 24个颜色
// https://4x-ant-design.antgroup.com/docs/spec/colors-cn
// gray-4#f0f0f0
// gray-5#d9d9d9
// gray-6#bfbfbf
// gray-7#8c8c8c
// gray-8#595959
// gray-9#434343
// gray-10#262626
// gray-11#1f1f1f
// gray-12#141414
// gray-13#000000

const ccc24 = [...Array(24)].map((e) => '#f0f0f0')

export default {
  name: 'DateLine',
  // components: {
  //   RightPanel,
  //   ViewSettings,
  //   TopPanel
  // },
  mixins: [ChartWatcherMixin],
  data() {
    return {
      chartOption: {
        grid: {
          show: true,
          // bottom: 20,
          // bottom: 70,
          // bottom: 80,

          // top: 8,
          // bottom: 20,
          // bottom: 70,
          // bottom: 80,
          borderWidth: 0, // 确保没有边框

          top: 8,
          bottom: 120,
          left: 25,
          right: 0
        },
        tooltip: {
          trigger: 'axis', // 轴触发
          formatter: (params) => handleLineFormatter.call(this, params)
        },
        dataZoom: [
          {
            // startValue: '2024-01-18',
            // endValue: '2024-10-15',
            bottom: 10,
            right: 5,
            left: 5
          }
        ],
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            // interval: 0, // 使x轴文字显示全
            interval: 'auto', // 自动调整间隔
            rotate: 60
          }
          // splitLine: {
          //   // 网格样式
          //   show: true,
          //   lineStyle: {
          //     color: '#f0f0f0',
          //     width: 1,
          //     type: 'solid'
          //   }
          // },
        },
        yAxis: {
          type: 'value',
          interval: 1, // 步长
          min: 1, // 起始
          max: 49, // 终止
          splitLine: {
            // 网格样式
            show: true,
            lineStyle: {
              color: [...ccc24, 'red', ...ccc24],
              width: 1,
              type: 'solid'
            }
            // show: false
          }
          // axisLine: {
          //   // 轴线样式
          //   // show: true,
          //   // lineStyle: {
          //   //   color: '#f0f0f0' // 设置 Y 轴线颜色
          //   // }
          //   show: false,
          // },
          // axisTick: {
          //   // 刻度线样式
          //   // show: true,
          //   // lineStyle: {
          //   //   color: '#f0f0f0' // 设置 Y 轴刻度线颜色
          //   // }
          //   show: false,
          // }
        },
        visualMap: {
          top: 50,
          right: 10,
          pieces: [
            {
              gt: 0,
              lte: 25,
              color: '#93CE07'
            },
            {
              gt: 25,
              lte: 50,
              color: '#FBDB0F'
            }
            // {
            // 	gt: 100,
            // 	lte: 150,
            // 	color: '#FC7D02'
            // },
            // {
            // 	gt: 150,
            // 	lte: 200,
            // 	color: '#FD0100'
            // },
            // {
            // 	gt: 200,
            // 	lte: 300,
            // 	color: '#AA069F'
            // },
            // {
            // 	gt: 300,
            // 	color: '#AC3B2A'
            // }
          ],
          outOfRange: {
            color: '#999'
          }
        },
        series: [
          {
            data: [],
            type: 'line',
            lineStyle: {
              // color: lineColor, // 默认颜色
              width: 1 // 默认线宽
            },
            emphasis: {
              lineStyle: {
                // color: lineColor, // 悬停时的颜色
                width: 1 // 悬停时的线宽
              }
              // itemStyle: {
              //   color: "#ff7f50", // 悬停时数据点的颜色
              //   borderColor: "#ff7f50", // 数据点边框颜色
              //   borderWidth: 2, // 数据点边框宽度
              // },
            }
          }
        ]
      }
    }
  },
  methods: {
    updateChart() {
      if (this.myChart) {
        const values = this.allValues
        this.chartOption.xAxis.data = values.map((e) => e.time)

        if (values.length) {
          const startValue = values[values.length - 50].time
          const endValue = values[values.length - 1].time
          this.chartOption.dataZoom[0].startValue = startValue
          this.chartOption.dataZoom[0].endValue = endValue
        }

        this.chartOption.series[0].data = this.allValues.map((e) => {
          return {
            value: Number(e.number),
            sourceData: e,
            itemStyle: Number(e.number) === 25 ? { color: '#FF0000' } : {} // 为值为 25 的点设置颜色
          }
        })
        // 绘制图表
        this.myChart.setOption(this.chartOption)
      }
    }
  }
}
</script>
